<template>
	<div style="padding:10px">
    <!-- 功能区 -->
    <el-row :gutter = "30">
      <el-col :span="18">
        <!--搜索区-->
        <pannel-search refs="pannelsearch" v-model="value"  @searchmethod = "search($event)"></pannel-search>
      </el-col>
      <el-col :span="6">
        <!-- 按钮操作区 -->
        <pannel-operation refs="operationpannel" :items="btnItems" @create="create($event)"></pannel-operation> 
      </el-col>
    </el-row>
    <!-- 过滤细节展示 -->
    <el-row>
      <el-col>
        <pannel-filter-detail v-if="value.filters.isShow"></pannel-filter-detail>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <PannelGrid v-model="value" v-on="$listeners" @searchmethod = "search($event)"></PannelGrid>
      </el-col>
    </el-row>
	</div>	
</template>
<script>
  import PannelSearch from './components/pannelsearch'
  import PannelOperation from './components/panneloperation'
  import PannelFilterDetail from './components/pannelfilterdetail'
  import PannelGrid from './components/pannelgrid'
	export default {
    name: 'SearchPannel',
    props: {
      value: {
        type: Object,
        default: {}
      },
      btnItems: {
        type: Array,
        default: []
      }
    },
    components: {
      PannelSearch,
      PannelOperation,
      PannelFilterDetail,
      PannelGrid
    },
		data() {
			return {
        rs: 'this is '
			}
		},
    mounted(){
    },
    methods: {
      search(){
        debugger
        this.$emit('searchmethod')
      },
      create(){
        this.$emit('create')
      }
    }
	}
</script>